<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 40px auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script src="../components/ball.js"></script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			var w = canvas.width = 500;
			var h = canvas.height = 300
			// 初速度=0，g = 0.1,小球半径=10
			var vy = 0,g=0.1,r=10;
			var ball = new Ball({x:w/2,y:r,r:r}).render(ctx);
			(function move(){
				window.requestAnimationFrame(move);
				ctx.clearRect(0,0,w,h)
				// y轴速度+=加速度
				vy+=g;
				// 小球的y轴+=y轴的速度
				ball.y +=vy;
				ball.render(ctx)
				// 如果小球的y轴+半径比画布大，那么小球回到画布内，并且改变速度的方向，速度每次递减
				if(ball.y+ball.r>=h){
					ball.y = h-ball.r;
					vy*=-0.8;
				}
			})()
			
		</script>
	</body>
</html>
